<template>

    <audio src="http://127.0.0.1:8787/sounds/prefix_666d04999f8823.52540379.wav" ref="chatAudio"></audio>
    <div class="chat-container">
      <div class="chat-header">Chat <div id="status" style="color: red;"></div></div>
      <div ref="msgBody" class="chat-body" id="chat-body">
          <MessageComponent ref="messageComponentRef" />
      </div>
      <div class="chat-footer">
          <input ref="chatInput" type="text" id="Recording-input" class="chat-input" placeholder="Type a message..." :value="this.MsgData.chatInputText">
          <!-- <button id="startButton">开启录音</button> -->
          <el-button v-if="!chatData.taskIng" type="success" 
          @mousedown.native="this.startRecording" 
          @mouseup.native="this.stopRecording"
          >开启录音</el-button>
          <el-button v-else type="info" >正在会话</el-button>
          <!-- <button id="stopButton" disabled>结束录音</button> -->
          <div id="status"></div>
      </div>
  </div>
</template>
<script>
import { ref , onMounted } from 'vue'
import { MetahumanEventType } from '@/mitt/MetahumanEventType.js'
import emitter from '@/mitt/emitter.js'
import { store } from '@/store/main.js'
import { initSocket , sendMsg , socketConfig , MsgData , chatData } from '@/assets/utils/socket.js'
import metaClass from '@/assets/src/meta'




import MessageComponent from './template/MessageComponent.vue';




export default  {
    name: 'chat',
    components:  {
      MessageComponent
     },
    props:  {},
    data: () =>  {
      return  {
        chatInput:null,
        chatAudio:null,
        messageComponentRef:null,
        socketConfig : socketConfig,
        MsgData:MsgData,
        chatData:chatData,
        socket:null,
        mediaRecorder:null,
        audioChunks:[],
        RepMaxNum:10,
        pre_text:null,
        RepNum:0,

        metaClass: null
      };
    },
    computed: {
      
    },
    beforeCreate() {

    },
    created() {
    },
    beforeMount() {

    },
    mounted() {
      this.chatInput = this.$refs.chatInput;
      this.chatAudio = this.$refs.chatAudio;

      this.metaClass = new metaClass(
        "MRial6V9i3C6vA2I",
        {
          url:"ws://127.0.0.1:8091/stt"
        },
        {
          url:"ws://127.0.0.1:8092/chat",
          characterId:"be1ef32bb16f40dd90a99664337754b8",
        },
        {
          url:"ws://127.0.0.1:8090/tts",
          voice:"zhibing_emo",
          apiType:"aly",
        }
      )

      let _self = this;
      this.chatAudio.addEventListener('timeupdate', function() {
        console.log(_self.chatAudio.duration);
        console.log(_self.chatAudio.currentTime);
        // const  currentAudioTime = _self.chatAudio.currentTime;
        // const progress = _self.chatAudio.currentTime / _self.chatAudio.totalTime;
      })

      this.messageComponentRef = this.$refs.messageComponentRef;

      emitter.on(MetahumanEventType.UserSendMsg, this.userSendMsg.bind(this));
      emitter.on(MetahumanEventType.ChatSendMsg, this.chatSendMsg.bind(this));
      emitter.on(MetahumanEventType.ChatSendMsgIng, this.chatSendMsging.bind(this));
    },
    beforeUpdate() {
    },
    updated() {
    },
    beforeDestroy() {
      emitter.off(MetahumanEventType.UserSendMsg, this.userSendMsg.bind(this));
      emitter.off(MetahumanEventType.ChatSendMsg, this.chatSendMsg.bind(this));
      emitter.off(MetahumanEventType.ChatSendMsgIng, this.chatSendMsging.bind(this));
      // emitter.$off(MetahumanEventType.RecordingMsg, this.recordingMsg);
    },
    destroyed() {
    },
    methods:{
      startRecording() 
      {
        // if(this.chatData.taskIng) return;
        // initSocket();
        this.metaClass.startRecording();
      },
      stopRecording()
      {
        this.metaClass.stopRecording();
      },
      recordingMsg(text){
        // this.chatInput.value = text;
      },
      userSendMsg(text)
      {

        this.messageComponentRef.addMessage({
          "message":text,
          "userStyle":"userMsg"
        })
      },
      chatSendMsg(text)
      {
        this.messageComponentRef.addMessage({
          "message":text,
          "userStyle":"gpt"
        })
      },
      chatSendMsging(text)
      {
        this.messageComponentRef.messageUpdate(text);
      }
    }
}

</script>

<style scoped lang="less">


  .chat-container {
    width: 600px;
    max-width: 100%;
    height: 1000px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .chat-header {
    padding: 10px;
    background-color: #075E54;
    color: #fff;
    text-align: center;
    font-size: 18px;
  }

  .chat-body {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  .chat-footer {
    padding: 10px;
    background-color: #f1f1f1;
    display: flex;
  }

  .chat-input {
    flex: 1;
    padding: 10px;
    border-radius: 20px;
    border: 1px solid #ccc;
    outline: none;
  }

  .chat-send {
    background-color: #075E54;
    color: #fff;
    padding: 10px 20px;
    margin-left: 10px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
  }

  .chat-send:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
</style>